<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:th="http://www.thymeleaf.org"
      layout:decorate="~{system/base/layout}">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>后台管理系统-用户信息管理-用户信息</title>
    <!-- 引入bootstrap样式 -->
    <link th:href="@{/bootstrap/css/bootstrap.css}" rel="stylesheet" type="text/css">
    <!--图标库-->
    <link th:href="@{/lyear/css/materialdesignicons.min.css}" rel="stylesheet" type="text/css"/>
<!--    <link th:href="@{/lyear/css/font/iconfont.css}" rel="stylesheet" type="text/css"/>-->
    <link th:href="@{/lyear/css/font2/iconfont.css}" rel="stylesheet" type="text/css"/>
    <!--弹出框样式-->
    <link th:href="@{/lyear/jconfirm/jquery-confirm.min.css}" rel="stylesheet" type="text/css"/>
    <!--自定义样式-->
    <link href="../lyear/css/style.min.css" th:href="@{/lyear/css/style.min.css}" rel="stylesheet" type="text/css"/>

<!--    <script th:src="@{/js/jquery_min.js}"></script>-->
<!--    <script th:src="@{/js/bootstrap.min.js}"></script>-->
<!--    <script th:src="@{/js/wow.min.js}"></script>-->
<!--    <script th:src="@{/js/custom.js}"></script>-->
<!--    <script th:src="@{/plugins/slider-pro/js/jquery.sliderPro.min.js}"></script>-->
<!--    <script th:src="@{/plugins/owlcarousel/js/owl.carousel.min.js}"></script>-->
<!--    <script th:src="@{/layer/layer.js}"></script>-->

    <!-- 引入jQuery和bootstrap的js -->
    <script th:src="@{/js2/jquery.js}"></script>
    <script th:src="@{/bootstrap/js/bootstrap.js}"></script>
    <!--滚动条插件-->
    <script th:src="@{/lyear/js/perfect-scrollbar.min.js}"></script>
    <!--弹出框js-->
    <script th:src="@{/lyear/jconfirm/jquery-confirm.min.js}"></script>
    <!--自定义js脚本-->
    <script th:src="@{/lyear/js/main.min.js}"></script>
    <script th:src="@{/js2/md5.js}"></script>

    <script th:inline="javascript" type="text/javascript">

        //点击新增按钮弹出模态框。
        $(document).on("click", "#user_add_modal_btn", function () {
        // $("#user_add_modal_btn").click(function () {
            //清除表单数据（表单完整重置（表单的数据，表单的样式））
            reset_form("#userAddModal form");
            //弹出模态框
            $("#userAddModal").modal({
                //点击增加框背景不删除增加框
                backdrop: "static"
            });
        });

        //点击保存，保存新增用户信息。
        // $("#user_save_btn").click(function () {
        function addUser(){
            //清空表单样式
            console.log("保存用户");
            clean_form("#userAddModal form");
            var username = $("#username_add_input").val();
            var nickname = $("#nickname_add_input").val();
            var password = $("#password_add_input").val();
            var postcard = $("#postcard_add_input").val();
            // var sex = $("#sex_update_input").val();
            var telephone = $("#telephone_add_input").val();
            var education = $("#education_add_select").val();
            var position = $("#position_add_input").val();
            var political = $("#political_add_select").val();
            var town = $("#town_add_input").val();
            var village = $("#village_add_select").val();
            var address = $("#address_add_input").val();

            //username正则表达式，匹配中文、英文、数字包括下划线
            var usernameRegex = /^[\u4E00-\u9FA5A-Za-z0-9_]+$/;
            if (username.length === 0) {
                show_validate_msg("#username_add_input",
                    "error", "用户名为空");
                return false;
            } else if (usernameRegex.test(username) === false) {
                show_validate_msg("#username_add_input",
                    "error", "用户名不合法（用户名只能由中文、数字、英文和下划线组成）");
                return false;
            }

            //password正则表达式，匹配6-40位由数字、英文字母或者下划线组成的字符串
            var passwordRegex = /^\w{6,40}$/;
            if (password.length === 0) {
                show_validate_msg("#password_add_input",
                    "error", "密码不能为空");
                return false;
            } else if (passwordRegex.test(password) === false) {
                show_validate_msg("#password_add_input",
                    "error", "输入密码不合法（密码只能是6-40位由数字、英文和下划线组成的字符串）");
                return false;
            }

            //匹配汉字(真实姓名)
            var realnameRegex = /^[\u4e00-\u9fa5]{2,10}$/;
            if (nickname.length !== 0) {
                if (realnameRegex.test(nickname) === false) {
                    show_validate_msg("#nickname_add_input",
                        "error", "真实姓名不合法");
                    return false;
                }
            }

            //telephone正则表达式，匹配手机号码
            var phoneRegex = /^1[3,5,8]\d{9}$/;
            if (telephone.length !== 0) {
                if (phoneRegex.test(telephone) === false) {
                    show_validate_msg("#phone_add_input",
                        "error", "手机号不合法");
                    return false;
                }
            }

            var postcardRegex = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
            if (postcardRegex.test(postcard) === false) {
                show_validate_msg("#postcard_add_input",
                    "error", "身份证号不合法");
                return false;
            }


            //2、发送ajax请求保存用户
            $.ajax({
                url: "/platform/system/user/addUser",
                type: "POST",
                // data: $("#userAddModal form").serialize(),
                data:{
                    "nickname":nickname,
                    "username":username,
                    "password":password,
                    "postcard":postcard,
                    "sex":$("#userAddModal input:radio:checked").val(),
                    "telephone":telephone,
                    "education":education,
                    "position":position,
                    "political":political,
                    "town":town,
                    "village":village,
                    "address":address
                },
                success: function (result) {
                    if (result.code === 100) {
                        $("#userAddModal").modal('hide');
                        window.alert('用户新增成功！');
                        setTimeout(function () {
                            var pageNum = [[${page.number}]]+1;
                            var pageSize = [[${page.size}]];
                            location.href = "/platform/system/user/toUserinfoListUI?pageNum=" + pageNum + "&pageSize=" + pageSize;
                        }, 1000);
                    } else {
                        window.alert('用户新增失败！');
                    }
                }
            });
        }

        //点击编辑按钮时触发事件
        $(document).on("click", ".update_btn", function () {
            //根据用户id发送ajax请求，查出用户信息并显示
            getUserInfo($(this).attr("update-id"));
            // console.log($(this).attr("update-id"));
            //把用户的id传递给模态框的更新按钮
            $("#user_update_btn").attr("update-id", $(this).attr("update-id"));
            // console.log($("#user_update_btn").attr("update-id"));
            $("#userUpdateModal").modal({
                backdrop: "static"
            });
        });

        //根据id查出用户信息并显示
        function getUserInfo(id) {
            $.ajax({
                // url: "/platform/system/user/getUserById/" + id,
                url: "/platform/system/user/getUserById?id=" + id,
                type: "GET",
                success: function (result) {
                    var user = result.extend.user;

                    //显示数据之前先清除一下校验样式，如果有的话
                    reset_form("#userUpdateModal form");

                    $("#username_update_input").text(user.username);
                    $("#nickname_update_input").val(user.nickname);
                    $("#postcard_update_input").val(user.postcard);
                    $("#userUpdateModal input[name=type]").val([user.sex]);
                    $("#telephone_update_input").val(user.telephone);
                    $("#education_update_select").val(user.education);
                    // $("#education_update_input").val(user.education);
                    $("#position_update_input").val(user.position);
                    // $("#political_update_input").val(user.political);
                    $("#political_update_select").val(user.political);
                    $("#town_update_input").val(user.town);
                    $("#village_update_select").val(user.village);
                    $("#address_update_input").val(user.address);

                }
            });
        }

        //点击更新，更新用户信息
        // $("#user_update_btn").click(function () {
        // $(document).click("button#user_update_btn","click",function(){
        function updateUser(){
            //清空表单样式
            console.log("点击更新");
            console.log($("#user_update_btn").attr("update-id"));
            clean_form("#userUpdateModal form");
            var nickname = $("#nickname_update_input").val();
            var postcard = $("#postcard_update_input").val();
            // var sex = $("#sex_update_input").val();
            var telephone = $("#telephone_update_input").val();
            var education = $("#education_update_select").val();
            var position = $("#position_update_input").val();
            var political = $("#political_update_select").val();
            var town = $("#town_update_input").val();
            var village = $("#village_update_select").val();
            var address = $("#address_update_input").val();

            //匹配汉字(nickname)
            var nicknameRegex = /^[\u4e00-\u9fa5]{2,10}$/;
            if (nicknameRegex.test(nickname) === false) {
                show_validate_msg("#nickname_update_input",
                    "error", "真实姓名不合法");
                return false;

            }

            //匹配手机号码
            var telephoneRegex = /^1[3,5,8]\d{9}$/;
            if (telephoneRegex.test(telephone) === false) {
                show_validate_msg("#telephone_update_input",
                    "error", "手机号不合法");
                return false;

            }
            var postcardRegex = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
            if (postcardRegex.test(postcard) === false) {
                show_validate_msg("#postcard_update_input",
                    "error", "身份证号不合法");
                return false;
            }


            //2、发送ajax请求保存更新的员工数据
            $.ajax({
                // url: "/platform/system/user/updateUser/" + $(this).attr("update-id"),
                url: "/platform/system/user/updateUser?userId=" + $("#user_update_btn").attr("update-id"),
                type: "PUT",
                // data: $("#userUpdateModal form").serialize(),
                data:{
                    "nickname":nickname,
                    "postcard":postcard,
                    "sex":$("#userUpdateModal input:radio:checked").val(),
                    "telephone":telephone,
                    "education":education,
                    "position":position,
                    "political":political,
                    "town":town,
                    "village":village,
                    "address":address
                },
                success: function (result) {
                    if (result.code === 100) {
                        $("#userUpdateModal").modal('hide');
                        window.alert('用户信息修改成功！');
                        setTimeout(function () {
                            var pageNum = [[${page.number}]] +1;
                            var pageSize = [[${page.size}]];
                            location.href = "/platform/system/user/toUserinfoListUI?pageNum=" + pageNum + "&pageSize=" + pageSize;
                        }, 1000);
                    } else {
                        window.alert('用户信息修改失败！');
                    }
                }
            });
        }

        //单个删除
        $(document).on("click", ".delete_btn", function () {
            //1、弹出是否确认删除对话框
            var id = $(this).attr("delete-id");
            var username = $(this).attr("delete-name");
            console.log(id);
            console.log(username);
            var message = window.confirm("确定删除用户" + username + "吗？");

            if (message == true){
                confirmDelete(id);
            }else {
                window.alert('已取消!');
            }
        });

        //确认删除后的行为
        function confirmDelete(id){
            $.ajax({
                url: "/platform/system/user/deleteUserById?id=" + id,
                type: "DELETE",
                success: function (result) {
                    if (result.code === 100) {
                        window.alert('删除该用户成功！');
                        setTimeout(function () {
                            var pageNum = [[${page.number}]] + 1;
                            var pageSize = [[${page.size}]];
                            location.href = "/platform/system/user/toUserinfoListUI?pageNum=" + pageNum  + "&pageSize=" + pageSize;

                        }, 1000);
                    } else {
                        window.alert('删除该用户失败!');
                    }
                }
            });
        }


        //清空表单样式及内容
        function reset_form(ele) {
            $(ele)[0].reset();
            //清空表单样式
            $(ele).find("*").removeClass("has-error has-success");
            $(ele).find(".help-block").text("");
        }

        //清空表单样式
        function clean_form(ele) {
            //清空表单样式
            $(ele).find("*").removeClass("has-error has-success");
            $(ele).find(".help-block").text("");
        }
        //显示校验结果的提示信息
        function show_validate_msg(ele, status, msg) {
            //清除当前元素的校验状态
            $(ele).parent().removeClass("has-success has-error");
            $(ele).next("span").text("");
            if ("success" === status) {
                $(ele).parent().addClass("has-success");
                $(ele).next("span").text(msg);
            } else if ("error" === status) {
                $(ele).parent().addClass("has-error");
                $(ele).next("span").text(msg);
            }
        }
    </script>
</head>
<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container" layout:fragment="content">
        <!--页面主要内容-->
        <main class="lyear-layout-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header">
                                <h4>用户信息</h4>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-hover table-striped">
                                        <thead>
                                        <tr>
                                            <th class="info">用户名</th>
                                            <th class="info">真实姓名</th>
                                            <th class="info">性别</th>
                                            <th class="info">手机号</th>
                                            <th class="info">学历</th>
                                            <th class="info">职业</th>
                                            <th class="info">政治面貌</th>
                                            <th class="info">所在镇</th>
                                            <th class="info">所在村</th>
                                            <th class="info">相关操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr th:each="user:${page.content}">
                                            <td th:text="${user.username}"></td>
                                            <td th:text="${user.nickname}"></td>
                                            <td th:text="${user.sex}"></td>
                                            <td th:text="${user.telephone}"></td>
                                            <td th:text="${user.education}"></td>
                                            <td th:text="${user.position}"></td>
                                            <td th:text="${user.political}"></td>
                                            <td th:text="${user.town}"></td>
                                            <td th:text="${user.village}"></td>
                                            <td>
                                                <button class="btn btn-primary btn-sm update_btn"
                                                        th:attr="update-id=${user.id}">
															<span class="glyphicon glyphicon-pencil"
                                                                  aria-hidden="true"></span> 编辑
                                                </button>
                                                <button class="btn btn-danger btn-sm delete_btn"
                                                        th:attr="delete-id=${user.id},delete-name=${user.username}">
															<span class="glyphicon glyphicon-trash"
                                                                  aria-hidden="true"></span> 删除
                                                </button>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <!-- 显示分页信息 -->
                            <div class="row">
                                <!-- 新增按钮 -->
                                <div class="col-md-1" style="margin-left: 24px">
                                    <button id="user_add_modal_btn" class="btn btn-primary">新增</button>
                                </div>

                                <div class="col-md-5">
                                    <div class="btn-group">
                                        <button class="btn btn-default">
                                            <span>页次：</span>
                                        </button>
                                        <button class="btn btn-default">
                                            <span th:text="${page.number}+1+'/'+${page.totalPages}+'页'"></span>
                                        </button>
                                        <button class="btn btn-default">
                                            <span>每页显示：</span>
                                        </button>
<!--                                        <div class="btn-group">-->
<!--                                            <button id="btnGroupDrop1"-->
<!--                                                    class="btn btn-default dropdown-toggle"-->
<!--                                                    data-toggle="dropdown" aria-haspopup="true"-->
<!--                                                    aria-expanded="false"><span-->
<!--                                                    th:text="${page.size}"></span>-->
<!--&lt;!&ndash;                                                <span class="caret"></span>&ndash;&gt;-->
<!--                                            </button>-->
<!--                                            <ul class="dropdown-menu">-->
<!--                                                <li th:each="i:${#numbers.sequence(1,10)}">-->
<!--                                                    <a th:text="${i}"-->
<!--                                                       th:href="@{/system/user/toUserinfoListUI(pageNum=${page.number},pageSize=${i})}"></a>-->
<!--                                                </li>-->
<!--                                            </ul>-->
<!--                                        </div>-->

                                        <button class="btn btn-default">
                                            <span>5条</span>
                                        </button>
                                        <button class="btn btn-default">
                                            <span>总记录数：</span>
                                        </button>
                                        <button class="btn btn-default">
                                            <span th:text="${page.totalElements}+'条'"></span>
                                        </button>
                                    </div>
                                </div>
                                <!-- 分页条信息 -->
                                <div class="col-md-5">
                                    <nav aria-label="Page navigation">
                                        <ul class="pagination pagination-lg pull-right"
                                            style="margin-top: 0">
                                            <li><a th:href="@{/system/user/toUserinfoListUI(pageNum=1,pageSize=${page.size})}">首页</a></li>
                                            <li th:if="${page.hasPrevious() }"><a
                                                    th:href="@{/system/user/toUserinfoListUI(pageNum=${page.number},pageSize=${page.size})}"
                                                    aria-label="Previous"> <span aria-hidden="true">&laquo;</span></a></li>
                                            <li th:each="page_Num:${#numbers.sequence(1, page.totalPages)}"
                                                th:class="${page_Num == page.number + 1?'active':''}">
                                                <a th:if="${page_Num == page.number + 1}"
                                                   th:text="${page_Num}"
                                                   th:href="@{#}"></a>
                                                <a th:text="${page_Num}"
                                                   th:if="${page_Num != page.number + 1}"
                                                   th:href="@{/system/user/toUserinfoListUI(pageNum=${page_Num},pageSize=${page.size})}"></a>
                                            </li>
                                            <li th:if="${page.hasNext() }"><a
                                                    th:href="@{/system/user/toUserinfoListUI(pageNum=${page.number}+2,pageSize=${page.size})}"
                                                    aria-label="Next"> <span aria-hidden="true">&raquo;</span></a></li>
                                            <li><a th:href="@{/system/user/toUserinfoListUI(pageNum=${page.totalPages},pageSize=${page.size})}">末页</a></li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 新增用户的模态框 -->
                    <div class="modal fade" id="userAddModal" tabindex="-1"
                         role="dialog" aria-labelledby="myModalLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal"
                                            aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                    <h4 class="modal-title">新增用户</h4>
                                </div>
                                <div class="modal-body">
                                    <!--要提交的表单 -->
                                    <form class="form-horizontal">
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">用户名：</label>
                                            <div class="col-sm-7">
                                                <input type="text" class="form-control"
                                                       id="username_add_input" name="username"
                                                       placeholder="请输入用户名：">
                                                <span class="help-block"></span>
                                            </div>
                                            <div class="col-sm-1">
                                                <em style="color: red">*</em>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">密码：</label>
                                            <div class="col-sm-7">
                                                <input type="password" class="form-control"
                                                       id="password_add_input" name="password"
                                                       placeholder="请输入密码：">
                                                <span class="help-block"></span>
                                            </div>
                                            <div class="col-sm-1">
                                                <em style="color: red">*</em>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">真实姓名：</label>
                                            <div class="col-sm-7">
                                                <input type="text" class="form-control"
                                                       id="nickname_add_input" name="nickname"
                                                       placeholder="请输入真实姓名：">
                                                <span class="help-block"></span>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">身份证号：</label>
                                            <div class="col-sm-7">
                                                <input type="text" class="form-control"
                                                       id="postcard_add_input" name="postcard"
                                                       placeholder="请输入身份证号：">
                                                <span class="help-block"></span>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">性别：</label>
                                            <div class="col-sm-7">
                                                <div class="example-box">
                                                    <label class="lyear-radio radio-inline"> <input
                                                            type="radio" name="type"
                                                            value="男" checked="checked"><span>男</span>
                                                    </label> <label class="lyear-radio radio-inline"> <input
                                                        type="radio" name="type"
                                                        value="女"> <span>女</span>
                                                </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">手机号：</label>
                                            <div class="col-sm-7">
                                                <input type="text" class="form-control"
                                                       id="telephone_add_input" name="telephone"
                                                       placeholder="请输入手机号：">
                                                <span class="help-block"></span>
                                            </div>
                                        </div>
<!--                                        <div class="form-group">-->
<!--                                            <label class="col-sm-2 control-label">学历：</label>-->
<!--                                            <div class="col-sm-6">-->
<!--                                                <input type="text" class="form-control"-->
<!--                                                       id="education_add_input" name="education"-->
<!--                                                       placeholder="请输入学历：">-->
<!--                                                <span class="help-block"></span>-->
<!--                                            </div>-->
<!--                                        </div>-->
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">学历:</label>
                                            <div class="col-sm-7">
                                                <select class="form-control" name="education" id="education_add_select">
                                                    <option value="">请选择</option>
                                                    <option th:each="educationLevel:${educationList}"
                                                            th:value="${educationLevel}"
                                                            th:text="${educationLevel}"></option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">职位：</label>
                                            <div class="col-sm-7">
                                                <input type="text" class="form-control"
                                                       id="position_add_input" name="position"
                                                       placeholder="请输入职位：">
                                                <span class="help-block"></span>
                                            </div>
                                        </div>
<!--                                        <div class="form-group">-->
<!--                                            <label class="col-sm-2 control-label">政治面貌：</label>-->
<!--                                            <div class="col-sm-6">-->
<!--                                                <input type="text" class="form-control"-->
<!--                                                       id="political_add_input" name="political"-->
<!--                                                       placeholder="请输入政治面貌：">-->
<!--                                                <span class="help-block"></span>-->
<!--                                            </div>-->
<!--                                        </div>-->
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">政治面貌：</label>
                                            <div class="col-sm-7">
                                                <select class="form-control" name="education" id="political_add_select">
                                                    <option value="">请选择</option>
                                                    <option th:each="politicalLevel:${politicalList}"
                                                            th:value="${politicalLevel}"
                                                            th:text="${politicalLevel}"></option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">所在镇：</label>
                                            <div class="col-sm-7">
                                                <input type="text" class="form-control"
                                                       id="town_add_input" name="town"
                                                       placeholder="请输入所在镇：">
                                                <span class="help-block"></span>
                                            </div>
                                        </div>
<!--                                        <div class="form-group">-->
<!--                                            <label class="col-sm-2 control-label">所在村：</label>-->
<!--                                            <div class="col-sm-6">-->
<!--                                                <input type="text" class="form-control"-->
<!--                                                       id="village_add_input" name="village"-->
<!--                                                       placeholder="请输入所在村：">-->
<!--                                                <span class="help-block"></span>-->
<!--                                            </div>-->
<!--                                        </div>-->
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">所在村</label>
                                            <div class="col-sm-7">
                                                <select class="form-control" name="education" id="village_add_select">
                                                    <option value="">请选择</option>
                                                    <option th:each="villageLevel:${villageList}"
                                                            th:value="${villageLevel}"
                                                            th:text="${villageLevel}"></option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">详细地址：</label>
                                            <div class="col-sm-7">
                                                <input type="text" class="form-control"
                                                       id="address_add_input" name="address"
                                                       placeholder="请输入详细地址：">
                                                <span class="help-block"></span>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default"
                                            data-dismiss="modal">关闭
                                    </button>
                                    <button type="button" class="btn btn-primary"
                                            id="user_save_btn" onclick="addUser()">保存
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 修改用户的模态框 -->
                    <div class="modal fade" id="userUpdateModal" tabindex="-1"
                         role="dialog" aria-labelledby="myModalLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal"
                                            aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                    <h4 class="modal-title">修改用户信息</h4>
                                </div>
                                <div class="modal-body">
                                    <!--要提交的表单 -->
                                    <form class="form-horizontal" id="form-submit">
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">用户名：</label>
                                            <div class="col-sm-7">
                                                <p class="form-control-static"
                                                   id="username_update_input">
                                                </p>
                                                <span class="help-block"></span>
                                            </div>
                                            <div class="col-sm-1">
                                                <em style="color: red">*</em>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">真实姓名：</label>
                                            <div class="col-sm-7">
                                                <input type="text" class="form-control"
                                                       id="nickname_update_input" name="nickname"
                                                       placeholder="该用户还未填写真实姓名">
                                                <span class="help-block"></span>
                                            </div>
                                            <div class="col-sm-1">
                                                <em style="color: red">*</em>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">身份证号：</label>
                                            <div class="col-sm-7">
                                                <input type="text" class="form-control"
                                                       id="postcard_update_input" name="postcard"
                                                       placeholder="该用户还未填写身份证">
                                                <span class="help-block"></span>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">性别：</label>
                                            <div class="col-sm-7">
                                                <div class="example-box">
                                                    <label class="lyear-radio radio-inline"> <input
                                                            type="radio" name="type"
                                                            value="男" checked="checked"><span>男</span>
                                                    </label> <label class="lyear-radio radio-inline"> <input
                                                        type="radio" name="type"
                                                        value="女"> <span>女</span>
                                                </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">手机号：</label>
                                            <div class="col-sm-7">
                                                <input type="text" class="form-control"
                                                       id="telephone_update_input" name="telephone"
                                                       placeholder="该用户还未填写手机号：">
                                                <span class="help-block"></span>
                                            </div>
                                        </div>
<!--                                        <div class="form-group">-->
<!--                                            <label class="col-sm-2 control-label">学历：</label>-->
<!--                                            <div class="col-sm-6">-->
<!--                                                <input type="text" class="form-control"-->
<!--                                                       id="education_update_input" name="education"-->
<!--                                                       placeholder="该用户还未填写学历：">-->
<!--                                                <span class="help-block"></span>-->
<!--                                            </div>-->
<!--                                        </div>-->

                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">学历：</label>
                                            <div class="col-sm-7">
                                                <select class="form-control" name="education" id="education_update_select">
                                                    <option value="">请选择</option>
                                                    <option th:each="educationLevel:${educationList}"
                                                            th:value="${educationLevel}"
                                                            th:text="${educationLevel}"></option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">职业：</label>
                                            <div class="col-sm-7">
                                                <input type="text" class="form-control"
                                                       id="position_update_input" name="position"
                                                       placeholder="该用户还未填写职业">
                                                <span class="help-block"></span>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">政治面貌：</label>
                                            <div class="col-sm-7">
                                                <select class="form-control" name="political" id="political_update_select">
                                                    <option value="">请选择</option>
                                                    <option th:each="politicalLevel:${politicalList}"
                                                            th:value="${politicalLevel}"
                                                            th:text="${politicalLevel}"></option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">所在镇：</label>
                                            <div class="col-sm-7">
                                                <input type="text" class="form-control"
                                                       id="town_update_input" name="town"
                                                       placeholder="该用户还未填写所在镇">
                                                <span class="help-block"></span>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">所在村：</label>
                                            <div class="col-sm-7">
                                                <select class="form-control" name="education" id="village_update_select">
                                                    <option value="">请选择</option>
                                                    <option th:each="villageLevel:${villageList}"
                                                            th:value="${villageLevel}"
                                                            th:text="${villageLevel}"></option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">详细地址：</label>
                                            <div class="col-sm-7">
                                                <input type="text" class="form-control"
                                                       id="address_update_input" name="address"
                                                       placeholder="该用户还未填写详细地址">
                                                <span class="help-block"></span>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default"
                                            data-dismiss="modal">关闭
                                    </button>
                                    <button type="button" class="btn btn-primary"  th:attr="update-id=0"
                                            id="user_update_btn" onclick="updateUser()">更新
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </main>
    </div>
</div>

</body>
</html>